<template>
	<view>
		<!-- 商品分类tab -->
		<view class="indexherder">
			<scroll-view scroll-x scroll-left>
				<view class="cs" :class="[category_id ==  0 ? 'active' : '']" @tap="onSwitchTab" data-id="0">
					<text>首页</text>
				</view>
				<!-- 商品分类列表 -->
				<view class="cs" :class="item.category_id == category_id ? 'active' : ''" @tap="onSwitchTab" v-for="(item,index) in categoryList"
				 :key="index" :data-id="item.category_id">
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 拼团商品列表 -->
		<view class="cont">
			<scroll-view @scrolltolower="bindDownLoad" scroll-y :style="[{'height' : Height}]">
				<view class="main">
					<view class="main_goods" v-for="(item,index) in goodsList.data" :key="index" @tap="onTargetGoods" :data-id="item.goods_id">
						<!-- 商品图片 -->
						<view class="main_goods_left">
							 <image :src=" item.goods_image "></image>
						</view>
						<view class="main_goods_right">
							<!-- 商品标题 -->
							<view class="twolist-hidden">
								<text class="main_goods_title">{{item.goods_name}}</text>
							</view>
							<!-- 商品信息 -->
							<view class="main_goods_desc">
								<view class="">
									<text class="desc_introduction onelist-hidden">{{item.selling_point}}</text>
								</view>
								<text class="desc_situation">
									<text class="iconfont icon-pintuan_huaban"></text>
									<text class="people">{{ item.people }}人团</text>
									<text class="cl-9">已有{{ item.goods_sales }}人进行拼团</text>
								</text>
								<text class="desc_footer">
									<text class="price_x">¥{{ item.goods_sku.sharing_price }}</text>
									<text class="price_y cl-9">¥{{ item.goods_sku.line_price }}</text>
								</text>
							</view>
							<button class="settlement">去拼团</button>
						</view>
					</view>
					<view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
					<!-- 无数据提供的页面 -->
					<view v-if="!isLoading && !goodsList.data.length">
						<view class="yoshop-notcont">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">亲，暂无拼团商品哦</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			Height() {
				return uni.upx2px(this.scrollHeight * 2) + 'px';
			}
		},
		data() {
			return {
				// 商品分类列表
				categoryList: [],
				// 拼团商品列表
				goodsList: [],
				// 当前的分类id (0则代表首页)
				category_id: 0,
				scrollHeight: null,
				option: {}, // 当前页面参数
				list: {}, // 商品列表数据
				no_more: false, // 没有更多数据
				isLoading: true, // 是否正在加载中
				page: 1, // 当前页码
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			// Api：获取拼团首页
			_this.setListHeight();
			this.getIndexData();
		},
		methods: {

			/**
			 * Api：获取拼团列表
			 */
			getIndexData() {
				let _this = this;
				// 获取拼团首页
				_this._get('sharing.index/index', {}, function(result) {
					_this.setData({
						categoryList: result.data.categoryList
					});
				});
				// Api：获取商品列表
				_this.getGoodsList();
			},

			/**
			 * Api：切换导航栏
			 */
			onSwitchTab: function(e) {
				let _this = this;
				// 第一步：切换当前的分类id
				_this.setData({
					category_id: e.currentTarget.dataset.id,
					goodsList: {},
					page: 1,
					no_more: false,
					isLoading: true,
				});
				// 第二步：更新当前的商品列表
				_this.getGoodsList();
			},

			/**
			 * Api：获取商品列表
			 */
			getGoodsList(isPage, page) {
				let _this = this;
				_this._get('sharing.goods/lists', {
					page: page || 1,
					category_id: _this.category_id
				}, function(result) {
					console.log(result)
					let resList = result.data.list,
						dataList = _this.goodsList;
					if (isPage == true) {
						_this.setData({
							'goodsList.data': dataList.data.concat(resList.data),
							isLoading: false,
						});
					} else {
						_this.setData({
							goodsList: resList,
							isLoading: false,
						});
					}
				});
			},

			/**
			 * 跳转商品详情页
			 */
			onTargetGoods(e) {
				uni.navigateTo({
					url: '../goods/index?goods_id=' + e.currentTarget.dataset.id
				});
			},

			/**
			 * 分享当前页面
			 */
			onShareAppMessage: function() {
				// 构建页面参数
				let params = _this.urlEncode({
					'referee_id': _this.getUserId()
				});
				return {
					title: '拼团首页',
					path: "/pages/sharing/index/index?" + params
				};
			},

			/**
			 * 下拉到底加载数据
			 */
			bindDownLoad: function() {
				// 已经是最后一页
				if (this.page >= this.goodsList.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				// 加载下一页列表
				this.getGoodsList(true, ++this.page);
			},

			/**
			 * 设置商品列表高度
			 */
			setListHeight: function() {
				let systemInfo = wx.getSystemInfoSync(),
					upx = systemInfo.windowWidth / 750, // 计算upx
					tapHeight = Math.floor(upx * 98), // tap高度
					scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				console.log(
					systemInfo.windowHeight
				);
				this.setData({
					scrollHeight
				});
			},
		}
	}
</script>

<style>
	.cont {
		margin: 0;
		padding: 0;
		/* margin-top: 98upx; */
		line-height: 1;
	}

	.main {
		box-sizing: border-box;
		padding: 0 20upx;
	}

	.main_goods {
		margin: 20upx auto;
		padding: 20upx;
		display: flex;
		height: 320upx;
		background: #fff;
		box-sizing: border-box;
	}

	.main_goods_left {
		display: flex;
		width: 40%;
		height: 100%;
		background: #fff;
		align-items: center;
	}

	.main_goods_left image {
		display: block;
		width: 240upx;
		height: 240upx;
	}

	.main_goods_right {
		position: relative;
		width: 60%;
		height: 100%;
	}

	.main_goods_title {
		display: block;
		margin-top: 20upx;
		width: 100%;
		font-size: 28upx;
		line-height: 1.3;
		color: #333;
	}

	.main_goods_desc {
		position: absolute;
		left: 0upx;
		top: 90upx;
	}

	.main_goods_desc text {
		display: inline-block;
	}

	.desc_introduction {
		margin-top: 10upx;
		line-height: 1.4;
		font-size: 24upx;
		color: #ff495e;
		width: 400upx;
	}

	.desc_situation {
		font-size: 24upx;
		line-height: 1.3;
		color: rgb(240, 60, 60);
		margin-top: 10upx;
	}

	.people {
		margin: 0 13upx;
	}

	.cl-9 {
		color: #999;
	}

	.desc_footer {
		margin-top: 15upx;
		font-size: 24upx;
	}

	.desc_footer .price_x {
		margin-right: 25upx;
		color: rgb(240, 60, 60);
		font-size: 28upx;
	}

	.desc_footer .price_y {
		text-decoration: line-through;
	}

	.settlement {
		position: absolute;
		right: 0upx;
		bottom: 0upx;
		line-height: 55upx;
		text-align: center;
		font-size: 28upx;
		border-radius: 40upx;
		color: #fff;
		background: linear-gradient(to right, rgb(235, 53, 107) 0%, rgb(240, 60, 60) 100%);
		box-shadow: 0px 2px 10px -2px rgb(235, 53, 107);
		border: none;
	}

	.indexherder {
		display: flex;
		position: fixed;
		top: 0;
		width: 100%;
		height: 88upx;
		color: #333;
		font-size: 28upx;
		background: #fff;
		border-bottom: 1upx solid #e4e4e4;
		z-index: 100;
		overflow: hidden;
		white-space: nowrap;
	}

	.indexherder scroll-view {
		height: 100%;
	}

	.cs {
		display: inline-block;
		padding: 0 15upx;
		text-align: center;
		min-width: 20%;
		height: 87upx;
		line-height: 88upx;
		box-sizing: border-box;
	}

	.cs text {
		display: block;
		height: 100%;
	}

	.active text {
		color: #fd4a5f;
		border-bottom: 2upx solid #fd4a5f;
	}
</style>
